<template>
  <ele-modal
    form
    :width="840"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <el-descriptions :border="true" :column="1" class="detail-table">
      <el-descriptions-item label="报名截止">
        <div>{{ form.deadline }}</div>
      </el-descriptions-item>

      <el-descriptions-item label="工资">
        <div>{{ form.job_salary }}{{ form.salary_unit }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="工资说明">
        <div>{{ form.salary_memo }}</div>
      </el-descriptions-item>

      <el-descriptions-item label="身高要求">
        <div>男{{ form.height_boy }}cm以上，女{{ form.height_girl }}cm以上</div>
      </el-descriptions-item>

      <el-descriptions-item label="工作要求">
        <div>{{ form.work_require }}</div>
      </el-descriptions-item>

      <el-descriptions-item label="结算方式">
        <div>{{ form.how_pay }}</div>
      </el-descriptions-item>

      <el-descriptions-item label="报名之后">
        <div>{{ form.after_apply_note }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </ele-modal>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { getJobById } from '@/api/company';
  const emit = defineEmits(['done', 'update:modelValue']);
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    jobId: Number
  });

  const form = ref([]);

  /** 请求状态 */
  const title = ref('');

  const getJobDetail = () => {
    getJobById({ id: props.jobId })
      .then((res) => {
        console.log(res);
        form.value = res;
        title.value = res.title + ' - ' + res.company.company_name;
      })
      .catch((e) => {
        EleMessage.error(e.message);
      });
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        if (props.jobId) {
          getJobDetail();
        }
      } else {
        console.log('什么也没有');
      }
    }
  );
</script>

<style lang="scss" scoped>
  .detail-table :deep(.el-descriptions__label) {
    width: 108px;
    text-align: right;
    font-weight: normal;
  }
</style>
